<template>
  <swiper :options="swiperOption" ref="swiperOption"  v-if="swiperList.length>0">
    <!-- slides -->
    <swiper-slide v-for="(item,index) in swiperList" :key="index">
      <img :src="item.imgUrl" alt>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    ...mapState(["swiperList"])
  },
  methods: {
    ...mapActions(["getSwiper"])
  },
  mounted() {
    this.getSwiper();
  }
};
</script>
<style scoped lang="">
.swiper-container {
  height: 120px;
}
.swiper-container img {
  width: 100%;
  height: 100%;
}
</style>
